<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>X6-React-Components</title>
  <link rel="stylesheet" href="https://unpkg.com/@antv/x6-react-components/dist/index.css">
</head>
<body>
  <div id="container"></div>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@antv/x6-react-components/dist/x6-react-components.js"></script>
  <script type="text/babel">
    const Menu = X6ReactComponents.Menu
    const SplitBox=X6ReactComponents.SplitBox
    const MenuItem = Menu.Item
    ReactDOM.render((
        <div style={{ height: '100%' }}>
        <div
          style={{
            width: '100%',
            height: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            background: '#f5f5f5',
            userSelect: 'none',
          }}
        >
          <SplitBox
            split="vertical"
            minSize={80}
            maxSize={-80}
            defaultSize={'80%'}
            primary="second"
          >
            <div
              style={{
                width: '100%',
                height: '100%',
                background: '#fff7e6',
              }}
            />
            <SplitBox
              split="vertical"
              minSize={40}
              maxSize={-160}
              defaultSize={240}
              primary="first"
            >
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  background: '#fff0f6',
                }}
              />
            </SplitBox>
          </SplitBox>
        </div>
      </div>
    ), document.getElementById('container'))
  </script>
</body>
</html>